<!DOCTYPE HTML>
<html>
<head>
<title>WebGL Test: WebGL Content Preserved after Tab Switched</title>
<style type="text/css">
    .nomargin {
        margin: 0px auto;
    }
</style>
<script src="pixel_webgl_util.js"></script>
</head>
<body onload="main()">
<canvas id="source" width="100" height="100" class="nomargin"></canvas>
<canvas id="destination" width="100" height="100" class="nomargin"></canvas>

<!-- The pixel result of this test is two green squares side-by-side. -->

<script>
    let canvasSource = document.getElementById("source");
    let canvasDestination = document.getElementById("destination");
    let canvasOptions = {
        preserveDrawingBuffer: true
    };
    let destinationContext = canvasDestination.getContext("2d", canvasOptions);
    let gl;

    canvasSource.addEventListener("webglcontextlost", function(event) {
        console.log('context lost');
        event.preventDefault();
    }, false);

    canvasSource.addEventListener("webglcontextrestored", init3d, false);

    function copyImageInternal() {
        let error = gl.getError();
        if (error) {
            console.log('Gl Error: ' + error);
        }
        destinationContext.clearRect(0, 0, 100, 100);
        destinationContext.drawImage(canvasSource, 0, 0);
    }

    function copyImage() {
        copyImageInternal();
        domAutomationController.send("SUCCESS");
    }

    function init3d() {
        gl = canvasSource.getContext("webgl", canvasOptions);
        if (gl == null)
            console.log("couldn't get webgl context");
        else
            console.log(gl);

        gl.viewport(0, 0, canvasSource.width, canvasSource.height);
        gl.clearColor(0, 0.5, 0, 1);
        gl.clear(gl.COLOR_BUFFER_BIT);
        copyImageInternal();
    }

    function main() {
        init3d();
        if (gl) {
            domAutomationController.send("READY");
        } else {
            domAutomationController.send("FAILURE");
        }
    }
</script>
</body>
</html>
